<template>
  <div class="searchForm">
    <el-row>
      <el-col :span="6">
        <el-autocomplete
          v-model="form.city"
          placeholder="切换城市"
          :fetch-suggestions="querySearch"
          :trigger-on-focus="false"
          :highlight-first-item="true"
          @select="handleSelect"
        ></el-autocomplete>
      </el-col>
      <el-col :span="9">
        <el-date-picker
          v-model="form.date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-col>
      <el-col :span="6">
        <el-popover placement="bottom" width="300" v-model="memberPopover">
          <el-row class="selectMember">
            <el-col :span="10">每间</el-col>
            <el-col :span="7">
              <el-select :value="`${adultNum}成人`" size="mini" placeholder="">
                <el-option
                  v-for="index of 7"
                  :key="index"
                  :value="index"
                  :label="index"
                  @click.native="changeAdultNum(index)"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="7">
              <el-select :value="`${childNum}儿童`" size="mini" placeholder="">
                <el-option
                  v-for="index of 4"
                  :key="index"
                  :value="index"
                  :label="index"
                  @click.native="changeChildNum(index)"
                ></el-option>
              </el-select>
            </el-col>
          </el-row>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" @click="resetMem">重置</el-button>
            <el-button type="primary" size="mini" @click="confirmMem"
              >确定</el-button
            >
          </div>
          <el-input
            slot="reference"
            placeholder="人数未定"
            suffix-icon="el-icon-user"
            readonly
            class="number"
            v-model="form.member"
          ></el-input>
        </el-popover>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" @click="handleSummit">查看价格</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      memberPopover: false,
      form: {
        city: "",
        date: "",
        member: "",
      },
      adultNum: 2,
      childNum: 0,
    };
  },

  methods: {
    handleSelect() {},

    // 输入城市显示建议列表
    querySearch(queryString, cb) {
      // console.log(queryString);
      this.$axios({
        url: "/cities",
        params: {
          name: queryString,
        },
      }).then((res) => {
        // console.log(res);
        const showList = res.data.data.map((city) => {
          return { value: city.name };
        });
        // console.log(showList);
        cb(showList);
      });
    },

    changeAdultNum(index) {
      this.adultNum = index;
    },

    changeChildNum(index) {
      this.childNum = index;
    },

    // 确定住房人员以及数量
    confirmMem() {
      if (this.childNum == 0) {
        this.form.member = `${this.adultNum}成人`;
      } else {
        this.form.member = `${this.adultNum}成人 ${this.childNum}儿童`;
      }
      this.memberPopover = false;
    },

    // 重置住房人员以及数量
    resetMem() {
      this.adultNum = 2;
      this.childNum = 0;
    },

    // 提交表单查询
    handleSummit() {
      // console.log(this.form);
      this.$store.commit("history/changeHotelCity", this.form.city);
      this.$router.replace({
        path: "/hotel",
        query: {
          cityName: this.form.city,
          enterTime: this.form.date[0],
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.searchForm {
  margin-bottom: 20px;
}

.number {
  width: 200px;
}

.selectMember {
  padding: 20px 5px;
}

/deep/ .el-input__icon {
  font-size: 20px;
}
</style>